<template>
  <div>
    <el-button type="primary" @click="addBoard">新增桌台</el-button>

    <el-table :data="dataList" stripe border style="width: 100%;" v-loading="isLoading"
              :cell-style="{'text-align':'center'}"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="boardName" label="桌台名称"></el-table-column>
      <el-table-column prop="boardNumber" label="桌台号"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template #default="{row}">
          <el-tag type="success" v-if="row.state === 1">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="(isEdit ? '编辑' : '新增') + '桌台'" v-if="dialogVisible" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="桌台名称" prop="boardName">
          <el-input v-model="form.boardName" placeholder="请输入桌台名称"></el-input>
        </el-form-item>
        <el-form-item label="桌台号" prop="boardNumber">
          <el-input v-model="form.boardNumber" placeholder="请输入桌台号"></el-input>
        </el-form-item>
        <el-form-item label="启用禁用" prop="state">
          <el-switch
              v-model="form.state"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  KAFEE_GET_BOARD_LIST,
  KAFEE_POST_BOARD_CREATE,
  KAFEE_POST_BOARD_DELETE, KAFEE_POST_BOARD_UPDATE,
  KAFEE_POST_CATE_DELETE
} from "@/assets/const/api";

export default {
  name: 'index',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      isEdit:false,
      dataList:[],
      isLoading:false,
      dialogVisible:false,
      curRow:{},
      form:{
        boardName:'',
        boardNumber:'',
        state:1
      },
      rules:{
        boardName: [
          { required: true, message: '请输入桌台名称', trigger: 'blur' },
        ],
        boardNumber: [
          { required: true, message: '请输入桌台号', trigger: 'blur' },
        ],
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getData();
  },
  methods: {
    getData(){
      this.isLoading = true;
      this.$http.get(KAFEE_GET_BOARD_LIST).then(res => {
        this.dataList = res.data ||[];
        this.isLoading = false;
      });
    },
    addBoard(){
      this.isEdit = false;
      this.dialogVisible = true;
    },
    editClick(row){
      this.isEdit = true;
      this.form = row;
      this.dialogVisible = true;
    },
    deleteClick(row){
      this.$confirm('确认删除该桌台吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(KAFEE_POST_BOARD_DELETE,{id:row.id}).then(res => {
          this.$message.success('操作成功');
          this.getData();
        });
      }).catch(() => {});

    },
    submitForm(){
      this.$refs['form'].validate((valid, object) => {
        if (valid) {
          this.handleSave();
        } else {
          let key = Object.keys(object)[0];
          this.$message.error(object[key][0].message);
          return false;
        }
      });
    },
    handleSave(){
      let url = this.isEdit?KAFEE_POST_BOARD_UPDATE:KAFEE_POST_BOARD_CREATE;
      this.$http.post(url,this.form).then(res => {
        this.$message.success('操作成功');
        this.dialogVisible = false;
        this.getData();
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>